import React from 'react';
import ReactDom from 'react-dom';

import uuid from 'uuid';

class Tabs extends React.Component{
    constructor(props={list:[]}){
        super(props);
        // if(this.props.list.length>0){
        //     this.props.list = this.props.list.map((item)=>{item['key']=uuid(); return item;});
        // }
        this.state = {
            list: this.props.list,
            currentKey : ''
        };
    }
    select(key){
        //this.state.currentName = key;
        this.setState({currentKey:key});
    }
    render(){
        //const as = this.state.list.map(item=>{return <a className={currentName==item.name?"active":""} key={item.name} onClick={()=>this.bian(item.name)>{item.name}</a>; });
        let as = [];
        let div;
        this.state.list.forEach((item,index)=>{
            as.push(<a href="javascript:void(0);" onClick={()=>this.select(item.key)} className={this.state.currentKey==item.key?"active":""} key={item.key}>{item.name}</a>);
            if(this.state.currentKey==item.key){
                div = <div>{item.body}</div>
            }
        });


        return <div className={"tabs"}>
            <nav>
                {as}
            </nav>
            {div}
        </div>;
    }
}


const list = [
    {key: uuid(),name: 'A',body:'aaaaaa'},
    {key: uuid(),name: 'B',body:'bbbbbb'},
    {key: uuid(),name: 'C',body:'cccccc'}
];

ReactDom.render(<Tabs list={list}/>,document.querySelector('#app'));
